<template>
  <div class="carbonQuota">
    <!-- 资产结构    -->
    <a-row class="Quotas">
      <a-col :md="18">
        <p class="title">交易管理</p>
        <div class="text">
          该功能允许用户管理碳排放权限的购买和出售，包括记录交易详情（如交易价格、数量和对方等），以及更新剩余配额。
        </div>
      </a-col>
      <a-col :md="6">
        <img src="@/assets/img/assets/bg_4.png" />
      </a-col>
    </a-row>
    <ul class="tab">
      <li @click="changeActiveIdx(1)" :class="[idx == 1 ? 'active' : '']">交易记录</li>
     
    </ul>
    <!-- 配额管理 -->
    <record v-if="idx == 1"></record>

    
  </div>
</template>

<script>

import record from '@/components/Assets/Transaction/record'
// import availableQuota from '@/components/Assets/Quota/availableQuota'
// import freezeQuota from '@/components/Assets/Quota/freezeQuota'
// import discharge from '@/components/Assets/Quota/discharge'
// import forecast from '@/components/Assets/Quota/forecast'


export default {
  components: {

    // LineChartMultid,
  record
  },
  data() {
    return {
      idx: 1,
      description: '统计页面',
      height: 300,
      columns: [
        {
          title: '时间周期',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '碳余额(吨)',
          align: 'center',
          dataIndex: 'miaosu',
        },
        {
          title: '最高价(元/吨)',
          align: 'center',
          dataIndex: 'company',
        },
        {
          title: '最高资产净值(元)',
          align: 'center',
          dataIndex: 'people',
        },
        {
          title: '均价资产净值(元)',
          align: 'center',
          dataIndex: 'state',
        },
        {
          title: '收盘碳价(元/吨)',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '变动金额(元)',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '资产净值(元)',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
      ],
      columns1: [
        {
          title: '配额/CCER编号',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '履约类型',
          align: 'center',
          dataIndex: 'miaosu',
        },
        {
          title: '履约数量tCO₂e',
          align: 'center',
          dataIndex: 'company',
        },
        {
          title: '履约产品',
          align: 'center',
          dataIndex: 'people',
        },
        {
          title: '归属交易所',
          align: 'center',
          dataIndex: 'state',
        },
        {
          title: '归属组织',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '变更时间',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '记录时间',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
      ],
    }
  },
  created() {

  },
  methods: {

    changeActiveIdx(idx) {
      this.idx = idx
   
    },

  },
}
</script>

<style lang="scss" scoped>
.carbonQuota {
  background: #fff;
  padding: 20px;
  background-size: cover;
  .Quotas {
    padding: 20px 20px 0 20px;
    background: linear-gradient(231deg, #ddf3fb, #eefaff);
    border-radius: 6px;
    .title {
      font-size: 16px;
    }
    .text {
        text-align: left;
      font-size: 12px;
    }
    img {
      width: 80%;
    }
  }
  .tab {
    display: flex;
    margin: 20px 0;
    flex-direction: row;
    padding: 0;
    li {
      list-style: none;
      padding: 6px 14px;
      font-size: 12px;
      margin-right: 6px;
      // background: #0c67ee;
      border-radius: 20px;
      color: #333;
      cursor: pointer;
    }
  }
  .module {
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
  }

  .flex_ {
    display: flex;
    width: fit-content;
    flex-direction: row;
    align-items: center;
    margin-left: 20px;
    .title {
      color: #999;
      margin-right: 10px;
    }
    .select {
      color: #000;
      margin-right: 4px;
    }
    i {
      color: #000;
    }
  }
}
.active {
  list-style: none;
  padding: 6px 14px;
  font-size: 12px;
  margin-right: 6px;
  background: #0c67ee;
  border-radius: 20px;
  color: #fff !important;
}
</style>